<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Echarts</title>

    <link rel="stylesheet" href="http://127.0.0.1/arcgis_js_api/library/4.11/esri/css/main.css">
    <link rel="stylesheet" href="css/mainApp.css">

    <script  src="https://code.jquery.com/jquery-2.2.4.min.js" ></script>

    <script src="../dist/config.js"></script>
    <script src="../dist/vendor/zrender.js"></script>
    <script src="http://127.0.0.1/arcgis_js_api/library/4.11/init.js"></script>
    <script>


        // 4.11有问题，坑爹，以后在研究实现方法
        require([
            'dojo/dom-construct',
            "esri/Map",
            "dextra/layers/GoogleVectorLayer",
            "dextra/modules/viewers/MapViewer",
            "esri/geometry/Point",
            "dojo/domReady!src/heatMapdemo"], function(domConstruct,Map, GoogleVectorLayer, MapViewer, Point) {


            var layer = new GoogleVectorLayer();

            var myMap = new Map({
                  basemap:"dark-gray",
            });


            var mapViewer = new MapViewer({
                map: myMap,
                viewNode: "viewDiv",
            });

            var view = mapViewer.view;
            var surface = view.surface;


            var _displayDiv = domConstruct.create('div', {
                style: 'width:100%;height:100%',
                className: this.divLayerClass
            }, surface);
            var zr=zrender.init(_displayDiv,{
                renderer:"svg"
            });
            view.when(function(){
                mapViewer.highlight(view.extent.center)
                var sp=view.toScreen(view.extent.center.clone());
                var sp2=view.toScreen(new Point({
                    longitude:102,
                    latitude:24,
                    spatialReference:view.spatialReference
                }));
                var circle = new zrender.Circle({
                    shape: {
                        cx: sp.x,
                        cy: sp.y,
                        r: 10,
                        percent:80
                    },
                    style: {
                        fill: 'none',
                        stroke: '#F00'
                    }
                });
                circle.animate("shape",true).when(5000,{
                    cx:sp2.x,
                    cy:sp2.y,
                    r: 50
                }).start();

                circle.animate("style",true).when(1000,{
                    fill:"#fff"
                }).when("2000",{
                    fill:"#F00"
                }).start();





                var line=new zrender.Line({
                    shape:{
                        x1:sp.x,
                        y1:sp.y,
                        x2:sp2.x,
                        y2:sp2.y,
                        percent:80
                    },
                    style: {
                        lineWidth:5,
                        shadowColor:"#def",
                        shadowBlur:10,
                        stroke: '#388'
                    }
                });
                zr.add(line);
                zr.add(circle);
            });




        });
    </script>



</head>
<body>

<div id="viewDiv"></div>
</body>
</html>